<template>
	<div>
		<div class="bigs">
			<div class="divs lefts">
				<img src="../../assets/login/bg.png" class="liftImg" />
			</div>
			<div class="divs small juzhong">
				<div class="tabs">
					<ul class="navgator" v-if="navgatorIndex == 2">
						<li class="navgatorLi isActive">{{ $t('login.WechatQRCodeLogin') }}</li>
						<img src="../../assets/login/erweima2.png" class="erweima1" @click="denglu()" />
					</ul>
					<ul class="navgator" v-if="navgatorIndex < 2">
						<li class="navgatorLi" :class="{ 'isActive': index == navgatorIndex }"
							@click="handleLeft(index)" v-for="(item, index) in navigatorIntl" :key="index">{{ item }}
						</li>
						<!--						<img src="../../assets/login/erweima1.png" class="erweima1" @click="ewmDenglu()" />-->
					</ul>
					<ul class="navgator" v-if="navgatorIndex == 3">
						<div class="hyxc">{{ $t('login.WechatQRCodeLogin') }}</div>
						<div class="yyzh">{{ $t('login.ExistingAccount') }}<span class="denglu" @click="denglu()">{{
							$t('dianpu.LogIn') }}</span></div>
					</ul>

					<!-- 账号密码登录 -->
					<div class="gerenxinxi" v-if="navgatorIndex == 0">
						<input class="phone" v-model="phone"
							:placeholder="$t('login.MobilePhoneNumber') + '/' + $t('login.emailAddress')" /><br />
						<input type="password" v-model="password" class="phone"
							:placeholder="$t('login.password')" /><br />
						<button type="button" class="logins" @click="mimaBtn()">{{ $t('dianpu.LogIn') }}</button>
						<div class="twos">
							<div class="zddl">
								<!--								<el-checkbox v-model="checked">下次自动登录</el-checkbox>-->
							</div>
							<div class="twos-span">
								<span class="wjmm" @click="tiaozhuan()">{{ $t('login.Forgetpassword') }}</span>|<span
									class="wjmm" @click="zhuce()">{{ $t('login.register') }}</span>
							</div>
						</div>
						<!-- <div class="bottom">
							<div class="disanfang">第三方账号登录</div>
							<img src="../../assets/login/wx.png" class="weixinImg" />
						</div> -->
					</div>
					<!-- 验证码登录 -->
					<div class="gerenxinxi" v-if="navgatorIndex == 1">
						<input class="phone " v-model="phone"
							:placeholder="$t('login.PleaseEnter') + $t('login.MobilePhoneNumber')" /><br />
						<input v-model="yanzhengma" class="phone phone1"
							:lplaceholder="$t('login.PleaseEnter') + $t('login.password')" />
						<button type="button" v-if="show == true" class="logins logins1" @click="yzmBtn1()">{{
							$t('login.verification') }}</button>
						<button type="button" v-if="show == false" class="logins logins1">{{ count
							}}{{ $t('login.reacquire') }}</button><br />
						<button type="button" class="logins" @click="yzmLogin()">{{ $t('dianpu.LogIn') }}</button>
						<div class="twos">
							<div class="zddl">
								<span class="wjmm" @click="tiaozhuan()">{{ $t('login.Forgetpassword') }}</span>
							</div>
							<div class="twos-span">
								<span class="wjmm" @click="zhuce()">{{ $t('login.register') }}</span>
							</div>
						</div>
						<!-- <div class="bottom">
							<div class="disanfang">第三方账号登录</div>
							<img src="../../assets/login/wx.png" class="weixinImg" />
						</div> -->
					</div>
					<!-- 二维码登录 -->
					<div class="gerenxinxi" v-if="navgatorIndex == 2">
						<div class="wxsm">
							<img src="../../assets/foot/app.png" class="erweimaImg" />
							<div class="disanfang">{{ $t('login.WeChatScan') }}</div>
						</div>

						<div class="bottom">
							<div class="disanfang"><span class="wjmm" @click="denglu()">{{ $t('login.password') }}{{
								$t('dianpu.LogIn') }}</span>|<span class="wjmm" @click="zhuce()">{{
										$t('login.RegisteredAccount') }}</span></div>

						</div>
					</div>
					<!-- 注册 -->
					<div class="gerenxinxi" v-if="navgatorIndex == 3">
						<!--						<input class="phone " v-model="userName" placeholder="请设置用户名" /><br />-->
						<input class="phone " v-model="phone"
							:placeholder="$t('login.PleaseEnter') + $t('login.MobilePhoneNumber')" /><br />
						<input class="phone " type="password" v-model="password"
							:placeholder="$t('login.please') + $t('login.setUp') + $t('dianpu.LogIn') + $t('login.password')" /><br />
						<!-- 	<input v-model="yaoqingma" class="phone phone1" placeholder="请输入邀请码" />
						<button type="button" class="logins logins1" @click="guanfangCode()">官方邀请码</button><br /> -->
						<input v-model="yanzhengma" class="phone phone1" placeholder="请输入验证码" />
						<!--						<button type="button " class="logins logins1">{{runCode}}</button><br />-->
						<button type="button" v-if="show == true" class="logins logins1" @click="yzmBtn()">{{
							$t('login.verification') }}</button>
						<button type="button" v-if="show == false" class="logins logins1">{{ count
							}}{{ $t('login.reacquire') }}</button><br />
						<button type="button" class="logins logins2" @click="register()">{{ $t('login.register')
							}}</button>
						<div class="twos">
							<div class="zddl">
								<el-checkbox v-model="checkedReg"><span @click.stop="yinsi()">{{
									$t('login.ReadAndAccept') }}<div @click="goNav('/xieyi')">{{
											$t('login.UserAgreement') }}
										</div>{{ $t('login.and') }}
										<div @click="goNav('yinsi')">{{ $t('login.PrivacyProtection') }}
										</div>
									</span>
								</el-checkbox>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			navgator: ['login.AccountLogin', 'login.MobilePhoneNumberLogin'],
			navgatorIndex: 0,
			checked: false,
			checkedReg: false,
			phone: '',
			password: '',
			yanzhengma: '',
			yaoqingma: '',
			userName: '',
			count: '',
			timer: null,
			show: true,
			isNew: '',//register未注册 login 已注册
			runCode: '获取验证码',
		}
	},
	computed: {
		navigatorIntl() {
			let arrList = ['login.AccountLogin', 'login.MobilePhoneNumberLogin']
			return arrList.map(item => this.$t(item));
		},
	},
	mounted() {
		if (this.$route.query.navgatorIndex) {
			let navgatorIndex = this.$route.query.navgatorIndex
			this.navgatorIndex = navgatorIndex
		}
	},
	watch: {},
	methods: {
		goNav(e) {
			this.$router.push({
				path: e
			})
		},
		handleLeft(index) {
			this.phone = ''
			this.password = ''
			this.yanzhengma = ''
			this.isNew = ''
			this.navgatorIndex = index
		},
		baocun() {
			if (this.username == '') {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请输入昵称',
					type: 'warning'
				});
				return
			} else {
				console.log('提交保存')
			}
		},
		yinsi() {

		},
		// 注册页面
		zhuce() {
			this.phone = ''
			this.password = ''
			this.yanzhengma = ''
			this.userName = ''
			this.count = ''
			this.timer = null
			this.show = true
			this.navgatorIndex = 3
		},
		// 登录页面
		denglu() {
			this.navgatorIndex = 0
		},
		// 二维码登录页面
		ewmDenglu() {
			this.navgatorIndex = 2
		},
		//获取官方邀请码
		guanfangCode() {
			this.$http({
				url: this.$http.adornUrl('/common/type/4'),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(({ data }) => {
				if (data.status == 0) {
					this.yaoqingma = data.data.value
				}
			})
		},
		// 验证码登录获取验证码
		yzmBtn1() {
			if (this.phone == '') {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请输入手机号',
					type: 'warning'
				});
				return
			}
			if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请输入有效的手机号',
					type: 'warning'
				});
				return
			}
			this.$http({
				url: this.$http.adornUrl('/user/sendMsg/' + this.phone + '/login'),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(({ data }) => {
				if (data.status == 0) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '验证码发送成功请接收查看',
						type: 'success'
					});
					this.isNew = data.data
					this.djs()
				} else {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: data.msg,
						type: 'warning'
					});
					return
				}
			})
		},
		// 注册获取验证码
		yzmBtn() {
			if (this.phone == '') {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请输入手机号',
					type: 'warning'
				});
				return
			}
			if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请输入有效的手机号',
					type: 'warning'
				});
				return
			}
			this.$http({
				url: this.$http.adornUrl('/user/sendMsg/' + this.phone + '/register'),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(({ data }) => {
				if (data.status == 0) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '验证码发送成功请接收查看',
						type: 'success'
					});
					this.isNew = data.data
					this.djs()
				} else {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: data.msg,
						type: 'warning'
					});
					return
				}
			})
		},
		// 倒计时
		djs() {
			const TIME_COUNT = 60;
			if (!this.timer) {
				this.count = TIME_COUNT;
				this.show = false;
				this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {
						this.count--;
					} else {
						this.show = true;
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000)
			}
		},
		// 密码登录
		mimaBtn() {
			if (this.phone == '') {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请输入手机号',
					type: 'warning'
				});
				return
			}
			if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请输入有效的手机号',
					type: 'warning'
				});
				return
			}
			if (this.password == '') {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请输入密码',
					type: 'warning'
				});
				return
			}
			this.$http({
				url: this.$http.adornUrl('/user/login'),
				method: 'post',
				data: this.$http.adornData({
					'invitation': '',
					// 'msg':this.yanzhengma,
					'phone': this.phone,
					'pwd': this.password,
					'platform': 'pc'
				})
			}).then(({ data }) => {
				var that = this
				if (data.status == 0) {
					// store.set('user', data.data)
					that.$store.commit('updateUserId', data.data.userId)

					that.$cookie.set('userId', data.data.userId)
					that.$cookie.set('uuid', data.data.uuid)
					that.getUserInfo()
					this.$router.go(-1);

				} else {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: data.msg,
						type: 'warning'
					});
					return
				}
			})
		},
		// 验证码登录
		yzmLogin() {
			// if(this.isNew!='register'){
			// 	this.$message('当前手机号还未注册，请先去注册')
			// 	return
			// }else{
			this.$http({
				url: this.$http.adornUrl('/user/bindOpenid'),
				method: 'post',
				data: this.$http.adornData({
					'msg': this.yanzhengma,
					'phone': this.phone,
					'platform': 'pc'
				})
			}).then(({ data }) => {
				var that = this
				if (data.status == 0) {
					this.$store.commit('updateUserId', data.data.userId)
					// that.$store.commit('uuid',data.data.uuid)

					that.$cookie.set('userId', data.data.userId)
					that.$cookie.set('uuid', data.data.uuid)
					that.getUserInfo()
					this.$router.go(-1);
				} else {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: data.msg,
						type: 'warning'
					});
					return
				}
			})
			// }

		},
		// 注册
		register() {
			if (!this.checkedReg) {
				this.$message('请勾选用户协议和隐私政策')
			} else {
				if (!this.yanzhengma) {
					this.$message('请填写验证码')
					return
				}
				this.$http({
					url: this.$http.adornUrl('/common/type/4'),	//获取邀请码
					method: 'get',
				}).then(({ data }) => {
					window.localStorage.setItem("QRcode", data.data.value);
					this.yaoqingma = data.data.value
					this.$http({
						url: this.$http.adornUrl('/user/bindOpenid'),
						method: 'post',
						data: this.$http.adornData({
							'invitation': this.yaoqingma,
							'msg': this.yanzhengma,
							'phone': this.phone,
							'pwd': this.password,
							'platform': 'pc'
						})
					}).then(({ data }) => {
						var that = this
						if (data.status == 0) {
							// store.set('user', data.data)
							that.$cookie.set('userId', data.data.userId)
							that.$cookie.set('uuid', data.data.uuid)

							this.$router.go(-1);

						} else {
							this.$notify({
								title: '提示',
								duration: 1800,
								message: data.msg,
								type: 'warning'
							});
							return
						}
					})
				})
				// if(!this.yaoqingma) {
				// 	this.$message('请填写邀请码')
				// 	return
				// }


			}
		},
		// 忘记手机号
		tiaozhuan() {
			this.$router.push({
				path: '/empty'
			})
		},
		//获取用户信息
		getUserInfo() {
			let that = this
			let userId = this.$cookie.get('userId')
			this.$http({
				url: this.$http.adornUrl('/user/' + userId),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(({ data }) => {
				window.localStorage.setItem('relationId', data.data.relationId);

				that.$cookie.set('relationId', data.data.relationId)
				that.$cookie.set('image_url', data.data.image_url)
				that.$cookie.set('nickName', data.data.nickName)
				that.$cookie.set('phone', data.data.phone)
				// that.$cookie.set('zhifubao', data.data.zhifubao)
				// that.$cookie.set('zhifubaoName', data.data.zhifubaoName)

				that.$store.commit('updateRelationId', data.data.relationId)
			})
		}
	}
}
</script>

<style scoped="scoped">
.bigs {
	width: 100%;
	height: 100vh;
	background: #FF2D55;
	min-width: 1200px;
	/* box-sizing: border-box; */
	/* overflow: hidden; */
	/* display: flex; */
	/* align-items: center; */
	/* flex-direction: column; */
	/* justify-content: center; */
	/* justify-content: flex-end; */

}

.divs {
	display: inline-block;
}

.lefts {
	width: 59%;
	/* height: 100vh; */
	/* padding-top: 20vh; */
	/* padding-left: 5%; */
	box-sizing: border-box;
	position: relative;
	/* float: left; */
}

.liftImg {
	width: 720px;
	position: absolute;
	top: 20vh;
	left: 0;
	right: 0;
	margin: auto;
}

.small {
	width: 40%;
	/* padding-top: 16vh; */
	padding-left: 5%;
	/*padding-right: 5%;*/
	box-sizing: border-box;
	position: absolute;
	height: 80%;
	top: 10%;

}

/* .juzhong{
	display: flex;
	justify-content: center;
	align-items: center;
} */
.tabs {
	background: #fff;
	width: 80%;
	height: 100%;
	/* max-width: 450px; */
	/* height: 100%; */
	/* max-height: 650px; */
	/*padding: 10% auto;*/
	/* box-sizing: border-box; */
	padding: 0 20px;
	/* box-shadow: 0 0 9px 3px #efefef; */

}


.navgator {
	/* width: 200px; */
	position: relative;
	top: 0;
	border-bottom: 1px solid #E6E6E6;
	line-height: 80px;

}

.navgatorLi {
	display: inline-block;
	justify-content: center;
	align-items: center;
	border-top: none;
	margin: 0 20px;
	cursor: pointer;
}

.isActive {
	color: #FF2D55;
	border-bottom: 3px solid #FF2D55;
}

.erweima1 {
	position: absolute;
	right: 0;
	top: 10px;
	width: 80px;

}

.gerenxinxi {
	padding: 20px 0;
	width: 100%;
	box-sizing: border-box;
	height: 40%;
	max-height: 610px;
}

.phone {
	height: 50px;
	width: 90%;
	line-height: 50px;
	font-size: 14px;
	padding: 0 20px;
	margin: 20px 5%;
	box-sizing: border-box;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
	background: #F4F4F4;
}

.phone1 {
	width: 50%;
}

.logins {
	margin: 20px 5%;
	height: 50px;
	width: 90%;
	line-height: 50px;
	/*padding-left: 15px;*/
	font-size: 14px;
	border: 1px solid #F4F4F4;
	border-radius: 4px;
	background: #FF2D55;
	color: #fff;
}

.logins1 {
	margin: 20px 0;
	width: 33%;
	border: 1px solid #FF2D55;
	border-radius: 4px;
	background: #FF2D55;
	color: #fff;
	text-align: center;
}

.twos {
	margin: 0px 5%;
	width: 90%;
}

.twos div {
	display: inline-block;
	font-size: 14px;

}

.zddl {
	width: 49%;
}

.twos-span {
	box-sizing: border-box;
	width: 100%;
	color: #999;
	text-align: right;
	display: flex;
	justify-content: flex-end;
}

.wjmm {
	color: #999;
	margin: 0 20px;
	cursor: pointer;
}

.wjmm:hover {
	color: #FF2D55;

}

.bottom {
	text-align: center;
	margin-top: 130px;
	color: #999;
	font-size: 14px;
}

.disanfang {
	margin: 20px 0;
}

.weixinImg {
	width: 50px;
	height: 50px;
}

.wxsm {
	width: 100%;
	text-align: center;
	padding-top: 50px;
}

.erweimaImg {
	width: 260px;
	height: 260px;
}

/* 注册 */
.hyxc {
	font-size: 36px;
	font-weight: 600;
}

.yyzh {
	font-size: 18px;
	color: #999;
	line-height: 20px;
	margin-bottom: 20px;
}

.denglu {
	color: #FF2D55;
	cursor: pointer;
}

.logins2 {
	border: 1px solid #FF2D55;
	background: #FF2D55;
	color: #fff;
}

/* @media (max-width: 1439px) { */

/* CSS规则 */
/* .bigs {}

	.liftImg {
		width: 100% !important;
		background: firebrick;
	} */
/* } */
</style>
